<template>
	<view>
		<view>
			<view class="leaveNav">
				<view style="font-weight: 800;font-size: 39rpx;">巡查情况
					<view class="violationLine"></view>
				</view>
				<button class="leaveBtn" @click="leaveBtnFun()">提交</button>
			</view>
			<view class="displayStudentInfo">
				<view style="color:#8F8F94;margin-bottom:20rpx;">
					姓名：{{item.studentName}}
				</view>
				<view style="color:#8F8F94;margin-bottom:20rpx;">
					班级：{{item.className}}
				</view>
				<view style="color:#8F8F94;margin-bottom: 20rpx;" v-if="item.dvType ? true :false">
					违纪行为：【{{item.dvType |  showDvtype}}】
				</view>
				<view style="color:#8F8F94;margin-bottom: 20rpx;" v-if="item.dvType ? true :false">
					巡查情况：{{item.describeTxt}}
				</view>
				
				<view style="color: #8F8F94;margin-bottom:20rpx;">
					巡查情况登记人：{{item.createBy}}
				</view>
				
				<view v-if="item.patrolImg" style="margin-bottom: 20rpx;">
					<img :src="img" class="imgSty" mode=""></img>
				</view>

				

				<view style="color: #8F8F94;margin-bottom:20rpx;">
					处理结果录入
					<textarea class="repText2" placeholder="请输入处理结果" style="font-weight: 500;font-size: 32rpx;"
						v-model="register"></textarea>
				</view>
				<view class="repDevice" style="margin-top:50rpx;">拍照</view>
				<view>
					<view class="repDevice" style="position: relative;top:180rpx;left:230rpx">上传照片</view>
					<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	import * as imageConversion from 'image-conversion'
	export default {
		data() {
			return {
				userName: '',
				topName: '入校/早操巡查',
				id: '',
				time: false,
				item: '',
				actualHandler: "",
				patrolId: 0,
				register: "",
				imgShow: '',
				img:'',
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})

			this.actualHandler = uni.getStorageSync("loginName");
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		methods: {
			leaveBtnFun() {
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				if (!this.imgShow) {
					this.$api.dormitory.getUpdate(this.patrolId, this.register, this.actualHandler, '').then(res => {
						console.log(res);
						uni.hideLoading();
						if (res.message == "操作成功") {
							uni.showToast({
								title: '提交成功！',
								icon: 'success',
								duration: 3000
							});
							uni.navigateTo({
								url: `/pages/abnormal/Patrol`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.showToast({
								title: '提交失败！',
								duration: 2000
							});
						}
					})
				} else {
					uni.uploadFile({
						url: uni.url + 'common/uploadFile',
						filePath: this.imgShow,
						name: "file",
						file: this.file,
						success: res => {
							var handleImg = JSON.parse(res.data).data;
							
							this.$api.dormitory.getUpdate(this.patrolId, this.register, this.actualHandler,
								handleImg).then(res => {
								console.log(res);
								uni.hideLoading();
								if (res.message == "操作成功") {
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 3000
									});
									uni.navigateTo({
										url: `/pages/abnormal/Patrol`,
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
								} else {
									uni.showToast({
										title: '提交失败！',
										duration: 2000
									});
								}
							})
						}
					})
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						console.log(res)
						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)
					}
				})
			}
		},
		onLoad(options) {
			var that = this
			var obj = JSON.parse(options.obj);
			console.log(obj);
			this.item = obj;
			if (obj.patrolImg) {
				this.img = ` ${that.$baseAppUrl}common/downloadFileImg?filename=${obj.patrolImg}`
			} else {
				this.item.patrolImg = null
			}
			this.patrolId = this.item.id;
		},
		filters: {
			showDvtype(type) {
				if (type == "7") {
					return "迟到"
				} else if (type == "8") {
					return "未戴校牌"
				} else if (type == "9") {
					return "未穿校服"
				} else if (type == "6") {
					return "其他"
				} else if (type == "11") {
					return "校园抽烟"
				} else if (type == "12") {
					return "打架斗殴"
				} else if (type == "10") {
					return "携带外卖"
				} else if (type == "14") {
					return "打牌赌博"
				} else if (type == "15") {
					return "翻爬围墙"
				} else if (type == "16") {
					return "谩骂他人"
				} else if (type == "17") {
					return "携带违禁品"
				} else if (type == "13") {
					return "饮酒酗酒"
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.violationLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;


	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50rpx 100rpx;
		margin-bottom: -50rpx;
	}

	.displayStudentInfo {
		position: relative;
		top: 50rpx;
		left: 50rpx;

	}

	.repText {
		/* border: solid 1upx #999999; */
		border-radius: 20upx;
		width: 610rpx;
		height: 150upx;
		word-wrap: break-word;
		padding: 5px;
		/* margin-left:-10rpx; */
	}

	.repText2 {
		margin-top: 20rpx;
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 300upx;
		word-wrap: break-word;
		padding: 5px;
		/* margin-left:-10rpx; */
	}

	.attendanceLine {
		width: 600rpx;
		height: 5rpx;
		background-color: #8F8F94;
	}

	.repDevice {
		text-align: left;
		color: #808080;
		padding-left: 0rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 0rpx;
		margin-top: 0rpx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}
</style>
